<template>
  <div>
    <Navbar :appTitle="appTitle" @ClickRight="ClickRight"/>
    <div
        class="form-content wrap-apply"
        :style="{
        top: GLOBAL.currentEnvironment ? '0' : '',
        height: GLOBAL.currentEnvironment ? '100vh' : 'calc(100vh - 100px)',
        paddingBottom: GLOBAL.currentEnvironment ? '120px' : '',
      }"
    >
      <van-cell-group>
        <van-cell>
          <template #title>
            <p class="label required FormTit"><span></span>出库任务编号</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field
                  v-model="buildForm.taskCode"
                  input-align="right"
                  :maxLength="50"
                  placeholder="请输入、不输入则自动生成"
              />
            </div>
          </template>
        </van-cell>

        <div class="bottomLine"></div>
        <van-cell>
          <template #title>
            <p class="label required FormTit"><span></span>业务类型</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field-select-picker
                  input-align="right"
                  :supportClear="true"
                  label=""
                  placeholder="请选择"
                  v-model="buildForm.types"
                  :columns="warehousingTypes"
                  :option="{ label: 'text', value: 'value' }"
                  @confirm="(itemReport) => selectReport(itemReport, 'types')"
              />
            </div>
          </template>
        </van-cell>
        <div class="bottomLine"></div>
        <van-cell>
          <template #title>
            <p class="label  FormTit"><span></span>源单号</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field
                  input-align="right"
                  v-model="buildForm.sourceNumber"
                  :maxLength="50"
                  placeholder="请输入"
                  @blur="checkInputValue(buildForm.goodsCode)"
              />
            </div>
          </template>
        </van-cell>
        <div class="bottomLine"></div>

        <van-cell v-if="buildForm.types && buildForm.types == 'SALE'">
          <template #title>
            <p class="label FormTit"><span></span>客户</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field
                  input-align="right"
                  v-model="buildForm.customerName"
                  placeholder="请输入"
                  :maxLength="50"
              />
            </div>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group
          v-for="(p, i) in entryDetails"
          :key="i + '_' + p.serialId"
          style="margin-top: 5px;"
      >
        <p
            class="label otherText"
            style="display: flex; justify-content: space-between"
        >
          物品明细（{{ i + 1 }}）<span
            style="font-weight: 400; color: #ff4d4f;margin-right: 20px"
            @click="deleteGoods(i)"
            v-if="entryDetails.length > 0"
        >删除</span
        >
        </p>
        <div class="wrap">
          <div class="top">
            <div class="icon"></div>
            <div class="title">
              {{ p.goodsCode || "-" }} | {{ p.goodsName || "-" }}|
              {{ p.goodsSpec || "-" }}
            </div>
          </div>
          <div class="center">
            <div>
              <p>
                <span class="key">产地：</span>
                <span class="value">{{ p.address || "-" }}</span>
              </p>
              <p>
                <span class="key">包装规格：</span>
                <span class="value">{{ p.packageSpec || "-" }}</span>
              </p>
              <p>
                <span class="key">基本单位：</span>
                <span class="value">{{ p.unitIdText || "-" }}</span>
              </p>
            </div>
          </div>
        </div>
        <van-cell>
          <template #title>
            <p class="label  FormTit"><span></span>批号</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field-select-picker
                  :supportClear="true"
                  :defaultIndex="defaultIndex"
                  input-align="right"
                  placeholder="请选择"
                  v-model="p.batchCode"
                  :columns="p.goodsBatchs"
                  :option="{ label: 'batchCode', value: 'batchCode' }"
                  @confirm="goodsBatchIdConfirm($event, i,p)"
              />
            </div>
          </template>
        </van-cell>
        <div class="bottomLine"></div>
        <van-cell>
          <template #title>
            <p class="label  FormTit"><span></span>生产日期</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field
                  input-align="right"
                  is-link
                  readonly
                  name="picker"
                  v-model="p.produceDate"
                  placeholder="请选择"
              />
            </div>
          </template>
        </van-cell>
        <div class="bottomLine"></div>
        <van-cell>
          <template #title>
            <p class="label required  FormTit"><span></span>物品数量</p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field
                  input-align="right"
                  v-model="p.outboundGoodsNum"
                  :maxLength="21"
                  placeholder="请输入"
                  @blur="parseNumber(p)"
                  :formatter="(e) => newClearNoNum(e)"
              />
            </div>
          </template>
        </van-cell>
        <div class="bottomLine"></div>

        <div class="bottomLine"></div>
        <div
            v-if="goodsTypeExtendedFields && goodsTypeExtendedFields.length != 0"
        >
          <div v-for="(p2, index2) in goodsTypeExtendedFields" :key="index2">
            <p class="label FormTit" :class="{ required: p2.fieldMust == 2 }">
              <span></span>{{ p2.fieldName }}
            </p>
            <van-field
                :placeholder="p2.placeholder"
                input-align="right"
                v-model="p[p2.fieldKey]"
                :readonly="p2.fieldMust == 1"
                :type="p2.fieldType == 3 ? 'number' : 'input'"
                :maxlength="p2.fieldLength || '-'"
                :formatter="(value) => clearNoNumTwo(value, p2.fieldType)"
            />
            <div class="bottomLine"></div>
          </div>
        </div>
      </van-cell-group>
      <div class="addGoodScontain">
        <div class="addgoods" @click="addInventoryGoods">
          <van-icon name="plus" size="16px" color="#1890ff" style="top: 2px"/>
          <a>物品</a>
        </div>
      </div>

      <div class="search-bottoms">
        <van-button  :loading="subLoading" loading-text="提交中..."
              class="btnconfirm" @click="btnConfirm">提交</van-button >
      </div>
    </div>

    <!--选择出库日期 -->
    <van-popup v-model="timePickShow" position="bottom">
      <van-datetime-picker
          @confirm="confirmPick"
          v-model="happenTime"
          @cancel="cancelPick"
          type="date"
          title="生产日期"
          :formatter="formatter"
      />
    </van-popup>
    <!--选择物品 -->
    <goods-pickers
        v-if="showGoodsPicker"
        :listUrl="listUrl"
        :columns="goodsColumns"
        :selectedGoods="entryDetails"
        @getCheckedGoods="getCheckedGoods"
    ></goods-pickers>

  </div>
</template>
<script>
import {clearNoNum} from "@/utils/util";
import {getAction} from "@/api/manage";
import moment from "moment";
import Navbar from "@/components/navBar/navBar_right";
import {
  outboundTasksTypeList,
  // formTypeExtendedFieldList,
  outboundTasksAdd,
  outboundTasksEdit,
  outboundTasksDetail,
  getBatchCodeByGoodsId,
  pickingTTasksDetailList,
} from "@/api/mobile";
import VanFieldSelectPicker from "../../../components/ActionSheet/VanFieldSelectPicker";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import GoodsPickers from "../../../components/choiceuse/GoodsPickers";
import saleOrderPickers from "@/components/choiceuse/saleOrderPickers";
import store from "@/store";
import scanInputGoods from "@/components/scanCode/scanInputGoods";
import produceOrderPickers from "@/components/choiceuse/produceOrderPickers";
import {APILX} from "@/api/requestLx";
import {workOrderList} from "@/api/productionApply";
import {
  getDictItemsByTypes,
  genEntityCode,
  getBathRelProductDate,
} from "@/api/inventoryOrder";

export default {
  name: "inventoryOrderForm",
  components: {
    Navbar,
    VanFieldSelectPicker,
    ContactPickers,
    GoodsPickers,
    scanInputGoods,
    saleOrderPickers,
    produceOrderPickers,
  },
  data() {
    return {
      defaultIndex: 0,
      activeIndex: 0,
      subLoading: false,
      examKey: 1,
      //辅助单位
      buildForm: {
        entryCode: "",
        taskCode: "",
        types: "SALE",
        produceOrderId: "",
        produceOrderName: "",
        saleOrderId: "",
        saleOrderName: "",
        receiverPersion: "",
        receiverPersionName: "",
        outWarehouseTime: "",
        extDataJson: {},
      },

      timePickShow: false,
      recentGoodsIndex: 0,
      entryDetails: [],
      happenTime: new Date(),
      appTitle: "新建出库任务",
      isEdit: false,
      parentId: "",
      showExam: true,
      warehousingTypes: [],
      selectShow: false,
      timePickShow: false,
      formTypeExtendedFields: [],
      goodsTypeExtendedFields: [],
      showGoodsPicker: false,
      listUrl: "/wmsgoodsnotification/getOutboundTaskNotification",
      goodsColumns: {
        titleKey: ["goodsCode", "goodsName", "spec"], //标题
        content: [
          //内容
          {
            name: "产地",
            key: ["address"],
          },
          {
            name: "包装规格",
            key: ["packageSpec"],
          },
          {
            name: "基本单位",
            key: ["unitName"],
          },
          {
            name: "批号",
            key: ["batchCodeText"],
          },
          {
            name: "批号库存",
            key: ["batchCodeNumTxt"],
          },
        ],
        // labelKey: ["updateTime", "serialSpecifications"], //标签
        operationText: "",
      },

      showSaleOrderPickers: false,

      selectedSaleOrder: [],

      showProduceOrderPickers: false,

      selectedProduceOrder: [],
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.showPeopleSlect) {
      this.$refs.examine.closePicker();
      next(false);
    } else if (
        this.showGoodsPicker ||
        this.showProduceOrderPickers ||
        this.showSaleOrderPickers
    ) {
      this.showGoodsPicker = false;
      this.showProduceOrderPickers = false;
      this.showSaleOrderPickers = false;
      this.appTitle = this.isEdit ? "编辑出库任务" : "新建出库任务";
      next(false);
    } else {
      next();
    }
  },
  async created() {
    let _this = this;
    getDictItemsByTypes({type: 4}).then((res) => {
      if (res.code == 200 && res.result) {
        _this.warehousingTypes = res.result;
        console.log("类型", _this.warehousingTypes);
      }
    });
    // 扫工单码进入
    if (
        this.$route.query.formPage == "scanCode" &&
        this.$route.query.code.EntityType == "workOrder"
    ) {
      let itemRes = await workOrderList({id: this.$route.query.code.id});
      this.getCheckedProduceOrder(itemRes.result.records);
    }
    // 扫物品码进入
    if (
        this.$route.query.formPage == "scanCode" &&
        this.$route.query.code.EntityType == "goods"
    ) {
      this.changeScan(this.$route.query, "scan");
    }

    store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
    if (this.$route.query.id) {
      this.isEdit = true;
      this.parentId = this.$route.query.id;
    } else {
      this.isEdit = false;
      this.parentId = "";
    }
    this.buildForm.outWarehouseTime = moment(this.happenTime).format(
        "YYYY-MM-DD HH:mm"
    );
    let currentLoginUser = JSON.parse(
        localStorage.getItem("pro__Login_Userinfo")
    ).value;
    console.log("currentLoginUser", currentLoginUser);
    this.buildForm.receiverPersion = currentLoginUser.id;
    this.buildForm.receiverPersionName = currentLoginUser.realname;
    if (this.parentId) {
      this.appTitle = "编辑出库任务";
      // 出库单表单详情
      outboundTasksDetail({id: this.parentId}).then(async (res) => {
        if (res.code == 200) {
          let resObj = res.result;
          res.result.detailsList.forEach(async (item) => {
            let batchs = await _this.getGoodsBatchs(item.goodsId);
            this.entryDetails.push({
              ...item,
              goodsBatchs: batchs.result,
            });
          });
          // this.entryDetails = res.result.detailsList.map(async (item) => {
          //   let batchs = await _this.getGoodsBatchs(item.id);
          //   return {
          //     ...item,
          //     goodsBatchs: batchs,
          //   };
          // });
          console.log(this.entryDetails);
          this.buildForm = {...resObj, types: resObj.type};
          // for (let k in this.buildForm) {
          //   this.buildForm[k] = resObj[k];
          //   if (resObj.orderCode) {
          //     this.buildForm.saleOrderName = resObj.orderCode;
          //   }
          // }
        }
      });
      // 出库单关联物品详情
      // pickingTTasksDetailList({ outboundTaskId: this.parentId }).then((res) => {
      //   if (res.code == 200 && res.result) {
      //     this.entryDetails = res.result.records.map((son) => {
      //       return {
      //         serialId: son.serialId,
      //         serialLongName: son.serialName + "|" + son.serialNumber,
      //         serialName: son.serialName || "-",
      //         serialNumber: son.serialNumber || "-",
      //         serialSpecifications: son.serialSpecifications || "-",
      //         serialUnit: son.unitName || "-",
      //         inWarehouseNum: son.inWarehouseNum || null,
      //         ...son.extDataJson,
      //       };
      //     });
      //   }
      // });
    } else {
      this.initData();
    }

  },
  methods: {
    goodsBatchIdConfirm(item, index, p) {
      console.log(item, p, '99999')
      p.goodsBatchId = item.goodsBatchId
      this.recentGoodsIndex = index;
      let {goodsId, batchCode} = item;
      if (goodsId && batchCode) {
        getBathRelProductDate({goodsId, batchCode}).then((res) => {
          if (res.code == 200 && res.result) {
            this.entryDetails[this.recentGoodsIndex].produceDate =
                res.result.produceDate;
            // this.entryDetails[this.recentGoodsIndex].goodsBatchId =
            //   res.result.id;
          } else {
            this.entryDetails[this.recentGoodsIndex].produceDate = moment(
                new Date()
            ).format("YYYY-MM-DD");
            // (this.entryDetails[this.recentGoodsIndex].goodsBatchId = "");
          }
        });
      } else {
        this.entryDetails[this.recentGoodsIndex].produceDate = "";
      }
    },
    newClearNoNum(value, maxValue) {
      console.log(value, maxValue)
      //先把非数字的都替换掉，除了数字和.
      value = value.replace(/[^\d.]/g, "");
      //保证只有出现一个.而没有多个.
      value = value.replace(/\.{2,}/g, ".");
      //必须保证第一个为数字而不是.
      value = value.replace(/^\./g, "");
      //保证.只出现一次，而不能出现两次以上
      value = value
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
      //只能输入四个小数
      value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3");
      // console.log(value.includes('.'),'wwwwww')
      //小数位处理
      if (value.substring(0, 1) == "0" && value.substring(0, 2) != "0.") {
        value = "0";
      }
      //输入长度控制
      if (value > 9999999999.9999) {
        value = "";
        this.$toast("最多可输入14个字符，小数点后4位");
      }


      if (value > maxValue) {
        value = maxValue;
        this.$toast("不能输入大于该库位下的库存数量");
      }
      this.$forceUpdate()
      return value;
    },
    parseNumber(p) {
      let value = p.outboundGoodsNum;
      console.log(value);

      // 解析用户输入的值
      if (value === "") {
        return 0;
      }

      if (value == 0) {
        value = "";
      }

      // 去除非数字和小数点的字符
      const newValue = value.replace(/[^\d.]/g, "");
      // 分割整数和小数部分
      const parts = newValue.split(".");
      // 获取整数和小数部分的值
      let integer = parts[0];
      let decimal = parts[1];
      // 限制整数部分最多4位
      if (integer.length > 14) {
        integer = integer.slice(0, 14);
      }
      // 限制小数部分最多4位
      if (decimal && decimal.length > 4) {
        decimal = decimal.slice(0, 4);
      }
      // 拼接整数和小数部分
      let parsedValue = integer;
      if (newValue.includes(".")) {
        parsedValue += ".";
      }
      if (decimal) {
        parsedValue += decimal;
      }

      p.outboundGoodsNum = parsedValue;
      console.log(parsedValue, this.entryDetails);
      // 将解析后的值转为数字类型
      return parsedValue;
    },
    async getGoodsBatchs(id) {
      let batchs = await getBatchCodeByGoodsId({goodsId: id});
      return batchs;
    },
    // 物品明细-》删除
    deleteGoods(i) {
      this.entryDetails.splice(i, 1);
    },
    //出库类型选择
    selectReport(itemReport, key) {
      if (itemReport) {
        this.buildForm[key] = itemReport.value;
      } else {
        this.buildForm[key] = "";
      }
    },
    // 打开选择时间
    openTimePicker(index, value) {
      this.timePickShow = true;
      this.recentGoodsIndex = index;
      if (value) {
        this.happenTime = value;
      } else {
        this.happenTime = "";
      }
    },
    // 提交 - 表单验证
    btnConfirm() {
      if (!this.buildForm.taskCode) {
        this.$toast(`请输入任务编号`);
        return;
      }
      if (!this.buildForm.types) {
        this.$toast(`请选择业务类型`);
        return;
      }
      let isValidated = true;
      try {
        // 出库物品明细 为空 选项名称、数量 表单验证
        if (this.entryDetails && this.entryDetails.length > 0) {
          this.entryDetails.forEach((element, index) => {
            if (element.goodsCode) {
              if (!element.outboundGoodsNum || element.outboundGoodsNum == "") {
                isValidated = false;
                throw new Error(`物品明细（${index + 1}）物品数量不可为空`);
              }
            } else {
              isValidated = false;
              throw new Error(`请选择物品`);
            }
          });
        } else {
          throw new Error(`请选择物品`);
        }
        if (!isValidated) {
          return;
        }
      } catch (error) {
        this.$toast(error.message);
        return false;
      }

      this.handleSubmit();
    },
    handleSubmit() {
      let params = {
        ...this.buildForm,
        type: this.buildForm.types,
        detailsList: this.entryDetails.map((ele) => {
          return {
            ...ele,
          };
        }),
      };

      let commitApi = "";
      let successMeg = "";
      if (this.parentId) {
        params.id = this.parentId;
        commitApi = outboundTasksEdit;
        successMeg = "出库任务编辑成功！";
      } else {
        commitApi = outboundTasksAdd;
        successMeg = "出库任务创建成功！";
      }
      this.subLoading = true
      commitApi(params).then((res) => {
        if (res.success) {
          this.$toast(successMeg);
          this.reloadData()
          this.initData()
        } else {
          this.$toast(res.message);
        }
      }).finally(() => {
        this.subLoading = false
      })
    },
    reloadData() {
      this.buildForm = {
        entryCode: "",
        taskCode: "",
        types: "SALE",
        produceOrderId: "",
        produceOrderName: "",
        saleOrderId: "",
        saleOrderName: "",
        receiverPersion: "",
        receiverPersionName: "",
        outWarehouseTime: "",
      }

      this.entryDetails = []
    },

    // 初始化页面数据
    initData() {
      // 获取出库类型
      // 生产出库任务编号
      genEntityCode({entityCode: "WMS_OUTBOUND_TASK"}).then((res) => {
        if (res.code == 200) {
          this.buildForm.taskCode = res.result;
        } else {
          this.buildForm.taskCode = "";
          this.$toast(res.message);
        }
      });
    },
    // 确定选择时间
    confirmPick(date) {
      this.buildForm.outWarehouseTime = moment(date).format("YYYY-MM-DD HH:mm");
      this.entryDetails[this.recentGoodsIndex].produceDate = moment(
          date
      ).format("YYYY-MM-DD");

      this.timePickShow = false;
    },
    // 取消选择时间
    cancelPick() {
      this.timePickShow = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    // 出库物品明细-》添加
    addInventoryGoods() {
      this.appTitle = "选择物品";
      this.showGoodsPicker = true;
    },
    // 出库物品明细-》物品弹出层
    // projectVisible() {
    //   this.appTitle = "出库物品选择";
    //   this.showGoodsPicker = true;
    // },
    // 确认选中物品
    async getCheckedGoods(list) {
      this.showGoodsPicker = false;
      this.appTitle = this.isEdit ? "编辑出库任务" : "新建出库任务";
      let _this = this;
      list.forEach(async (son) => {
        let recIndex = this.entryDetails.findIndex((ele) => ele.id == son.id);

        if (recIndex != -1) {
          let recObj = _this.entryDetails[recIndex];
          return recObj;
        } else {
          let batchs = await _this.getGoodsBatchs(son.id);

          _this.entryDetails.push({
            ...son,
            goodsId: son.id,
            unitIdText: son.unitName,
            goodsBatchId: null,
            produceDate: null,
            outboundGoodsNum: null,
            goodsBatchs: batchs.result,
          });
        }
      });
    },
    // 扫码获取物品
    changeScan(v, opratorType) {
      if (opratorType == "scan") {
        if (v.code.EntityType !== "goods") {
          this.$toast("请扫正确二维码");
          return;
        }

        getAction("/basicserial/basicSerialInfo/queryById", {
          id: v.code.id,
        }).then((res) => {
          if (res.code == 200 && res.result) {
            let ids = this.entryDetails.map((item) => item.serialId);
            if (ids.includes(res.result.id)) {
              this.$toast("该物品已存在");
              return;
            } else {
              let {
                id,
                serialName,
                serialNumber,
                serialSpecifications,
                unitName,
              } = res.result;
              let newGoods = {
                serialId: id,
                serialLongName: serialName + "|" + serialNumber,
                serialName: serialName || "-",
                serialNumber: serialNumber || "-",
                serialSpecifications: serialSpecifications || "-",
                serialUnit: unitName || "-",
                inWarehouseNum: null,
              };
              if (this.entryDetails && this.entryDetails.length == 1) {
                if (!this.entryDetails[0].serialId) {
                  this.entryDetails = [];
                  this.entryDetails.push(newGoods);
                } else {
                  this.entryDetails.push(newGoods);
                }
              } else {
                this.entryDetails.push(newGoods);
              }
              this.$forceUpdate();
            }
            // for (const goods of this.entryDetails) {
            // if (goods.serialId == res.result.id) {
            //   this.$toast("该物品已存在");
            //   break;
            // } else {
            // let {
            //   id,
            //   serialName,
            //   serialNumber,
            //   serialSpecifications,
            //   serialUnit,
            // } = res.result;
            // let newGoods = {
            //   serialId: id,
            //   serialLongName: serialName + "|" + serialNumber,
            //   serialName: serialName || "-",
            //   serialNumber: serialNumber || "-",
            //   serialSpecifications: serialSpecifications || "-",
            //   serialUnit: serialUnit || "-",
            //   inWarehouseNum: null,
            // };
            // this.entryDetails.push(newGoods);
            // this.$forceUpdate();
            // }
            // }
          }
        });
      }
    },

    // 销售订单-》添加
    addSaleOrder() {
      this.appTitle = "销售订单选择";
      this.showSaleOrderPickers = true;
    },
    // 销售订单-》删除
    deleteSaleOrder() {
      this.buildForm.saleOrderId = "";
      this.buildForm.saleOrderName = "";
      this.selectedSaleOrder = [];
    },
    // 确认选中销售订单

    // 生产工单-》添加

    // 确认选中生产工单

    // 出库单 物品明细 数量处理
    needOutNumChange(e) {
      let value = clearNoNum(e);
      return value;
    },

    ClickRight() {
      this.showGoodsPicker = false;
      this.$router.push({
        path: "/application",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
@import "@/views/workManagement/materialRequisition/materialForm.scss";

.wrap-apply {
  /deep/ .van-field__control--right {
    text-align: right !important;
  }
}

.form-content {
  width: 100%;
  height: calc(100vh - 203px);
  background: #f5f5f5;
  overflow: scroll;
  padding: 20px 0;

  .label {
    padding: 0.26667rem 0 0.32rem;
  }

  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }

  .search-bottoms {
    width: 100%;
    height: 100px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0rem 11px;
    box-sizing: border-box;
    font-size: 32px;
    font-weight: 500;
    z-index: 9;

    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      color: #ffffff;
    }
  }
}

.bottomLine {
  height: 1px;
  background-color: #f2f2f2;
  margin: 0 2px;
}

.otherText {
  font-size: 32px;
  font-weight: bold;
  color: #191f25;
  padding-left: 20px !important;
}

.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 32px;

  /deep/ .van-cell {
    padding-right: 0;
    width: 600px;
  }

  /deep/ .van-field__control {
    max-width: 700px;
  }
}

/deep/ .van-nav-bar {
  z-index: 99;
}

/deep/ .van-sidebar-item--select::before {
  color: #1890ff;
  background-color: #1890ff;
}

/deep/ .van-tree-select__item--active {
  color: #1890ff;
}

.addGoodScontain {
  display: flex;
  flex-wrap: nowrap;

  .addgoods {
    flex: 1;
    background: #fff;
    font-size: 32px;
    text-align: center;
    height: 78px;
    line-height: 78px;
    color: #1890ff;
  }
}

.required span::after {
  left: -20px;
  top: 3px;
}

.filedClear {
  width: 28px;
  height: 28px;
}

.wrap {
  background: #fff;
  // margin: 24px 0;
  padding: 20px;
  width: 100vw;

  .top {
    display: flex;
    justify-content: flex-start;

    .icon {
      width: 6px;
      height: 36px;
      background: #1890ff;
      margin-top: 6px;
      margin-right: 20px;
    }

    .title {
      width: 620px;
      margin-right: 20px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #191f25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .spot img {
      width: 40px;
      height: 40px;
    }
  }

  .center {
    p {
      margin: 16px 25px;
      font-size: 28px;
      display: flex;
      position: relative;

      .key {
        color: #888888;
      }

      .value {
        color: #191f25;
        width: 380px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .arrow {
        color: #1890ff;
        // float: right;
        // margin-right: -0.05rem;
        // display: block;
        position: absolute;
        right: -10px;
      }
    }

    .showAll {
      background: #f5f8ff;
      width: 100vw;
      margin-left: -0.15rem;
      padding: 0.15rem;
      margin-bottom: 0.15rem;
    }

    .fontAno {
      font-size: 30px;
      padding-left: 20px;
    }
  }

  .label {
    margin-left: -0.03rem;
    margin-top: -0.1rem;

    span {
      height: 0.16rem;
      background: #f0f6fe;
      color: #1890ff;
      margin-right: 0.1rem;
      padding: 0.03rem 0.08rem;
      font-size: 0.11rem;
      border-radius: 0.03rem;
    }
  }

  .foot {
    // height: 0.33rem;
    // line-height: 0.33rem;
    display: flex;
    justify-content: space-between;
    // margin: 0.15rem 0.12rem 0 0.12rem;
    font-size: 0.14rem;

    .pictures {
      width: 0.33rem;
      height: 0.33rem;
      line-height: 0.33rem;
      text-align: center;
      color: #fff;
      background: #1890ff;
      display: block;
      border-radius: 0.06rem;
      font-size: 0.12rem;
      margin-right: 0.1rem;
    }

    .text {
      width: 1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .opera {
      color: #1890ff;
      font-size: 0.14rem;
    }
  }
}
</style>
